<template>
	<view class="pull">
		<cl-popup v-model="indexStore.data.pull_show" direction="top" :zIndex="9">
			<div class="title">
				{{ $t("index.service") }}
				<image
					class="close"
					@click="indexStore.data.pull_show = false"
					src="/static/images/close.png"
					mode="aspectFill"
				></image>
			</div>
			<div class="list flex">
				<div
					class="li flex flex-column flex-center"
					v-for="(item, index) in list"
					:key="index"
				>
					<image class="img" :src="item.img" mode="aspectFill"></image>
					{{ item[cache.lang] }}
				</div>
			</div>
		</cl-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useIndexStore } from "../store/index";
import { useStore } from "/@/cool";
const { cache } = useStore();
const indexStore = useIndexStore();
const list = ref([
	{
		zh: "网约车",
		en: "Online car",
		img: "/static/images/netcar.png",
	},
	{
		zh: "出租车",
		en: "Taxi",
		img: "/static/images/taxi.png",
	},
	{
		zh: "公交",
		en: "Bus",
		img: "/static/images/bus.png",
	},
	{
		zh: "校车",
		en: "School bus",
		img: "/static/images/schoolbus.png",
	},
	{
		zh: "顺风车",
		en: "Free ride",
		img: "/static/images/freeride.png",
	},
	{
		zh: "代驾",
		en: "Substitute driving",
		img: "/static/images/daijia.png",
	},
	{
		zh: "自驾租车",
		en: "Car rental",
		img: "/static/images/suv.png",
	},
	{
		zh: "车生活",
		en: "Car Life",
		img: "/static/images/carlife.png",
	},
	{
		zh: "敬请期待",
		en: "Stay tuned",
		img: "/static/images/comingsoon.png",
	},
]);
</script>
<style lang="scss" scoped>
.pull {
	:deep(.cl-popup__wrapper) {
		top: 120rpx;
		.cl-popup__container {
			padding: 0 !important;
		}
	}
	.title {
		width: 100%;
		height: 87rpx;
		position: relative;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		line-height: 87rpx;
		text-align: center;

		.close {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 23rpx;
			right: 30rpx;
		}
	}
	.list {
		flex-wrap: wrap;
		.li {
			border-top: 1rpx solid #eeeeee;
			border-right: 1rpx solid #eeeeee;
			flex: 0 0 33.3333%;
			height: 200rpx;
			box-sizing: border-box;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			&:nth-child(3n) {
				border-right: 0;
			}
			.img {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
}
</style>
